<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Performance</title>
</head>

<body>
    <div style="width: 100px; height: 100px; background: red;">xiaotianshi</div>
    <!-- 测试有意义的元素绘制 FMP -->
    <h2 elementtiming="meaningful">meaningful</h2>

    <!-- 需要等待所有事件执行完毕后才能计算 -->
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            // 测试 DCL
            let s = 0;
            for (let i = 0; i < 100000000; i++) {
                s += i;
            }
            console.log(s);
            // 往页面插入一个节点，测试FCP
            document.body.appendChild(document.createTextNode('hello'));
        })

        setTimeout(() => {
            const {
                fetchStart, // 开始访问页面
                requestStart, // 请求开始
                responseStart, // 响应开始，
                responseEnd, // 响应结束
                domInteractive, // dom可交互时间点
                domContentLoadedEventEnd, // dom加载完毕，
                loadEventStart // 所有资源加载完毕
            } = performance.timing;

            let TTFB = responseStart - requestStart; // 首字节返回的事件， 服务器处理能力
            let TTI = domInteractive - fetchStart; // 整个交互的时长
            let DCL = domContentLoadedEventEnd - fetchStart // DOM加载完毕
            let L = loadEventStart - fetchStart; // 所有资源加载完毕时间
            console.log(TTFB, TTI, DCL, L)

            const paint = performance.getEntriesByType('paint');
            const FP = paint[0].startTime; // FP 只是画像素了而已
            const FCP = paint[1].startTime; // 首次有内容绘制，必须有内容
        }, 3000)

        // FMP
        new PerformanceObserver((entryList, observer) => {
            let FMP = entryList.getEntries()[0];
            console.log('FMP', FMP);
            observer.disconnect(); // 监控完后，直接结束即可
        }).observe({ entryTypes: ['element']})

        // LCP  最后一个就是最大的内容
        new PerformanceObserver((entryList, observer) => {
            entryList = entryList.getEntries()
            let LCP = entryList[entryList.length - 1];
            console.log('LCP', LCP);
            observer.disconnect(); // 监控完后，直接结束即可
        }).observe({ entryTypes: ['largest-contentful-paint']})

        // FID 
        new PerformanceObserver((entryList, observer) => {
            let firstInput = entryList.getEntries()[0];
            if (!firstInput) return;
            let FID = firstInput.processingStart - firstInput.startTime;
            console.log('FID', FID);
            observer.disconnect(); // 监控完后，直接结束即可
        }).observe({ entryTypes: ['first-input'], buffered: true})
    </script>
</body>

</html>